<template>
	<view class="terminal-state ">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<u-navbar title="终端分拨">
			<view class="u-m-r-20" slot="right" @click="goRecord()">
				记录
			</view>

		</u-navbar>
		<view class="flex terminal-state__header ">
			<view class="flex-2" v-if="checked==0">
				<u-search placeholder="请输入终端活机器sn号" v-model="requstBody.beginSn" shape="square" bg-color="#f6f6f6"
					:show-action="false" @search="goSearch(0)"></u-search>

			</view>
			<view class="flex-2 flex" v-else>
				<u-search class="u-margin-right-10" placeholder="起始SN号" v-model="requstTwoBody.beginSn" shape="square"
					bg-color="#f6f6f6" :show-action="false" @search="goSearch(1)"></u-search>
				<u-search class="u-margin-left-10" placeholder="结束SN号" v-model="requstTwoBody.endSn" shape="square"
					bg-color="#f6f6f6" :show-action="false" @search="goSearch(2)"> </u-search>
			</view>
			<view class="u-margin-left-20 u-margin-top-10" @click="triggleDrop">{{typeFilter[checked].label}} <u-icon
					name="arrow-down-fill" size="28"></u-icon>

			</view>
		</view>
		<scroll-view class="home__grid-group mt-200 " scroll-y @scrolltolower="onScrolltolower">
			<view>
				<view class="terminal-state__item flex align-center " v-for="(item,index) in terminalList" :key="index"
					@click="itemSelect(item)">
					<view class="u-margin-right-20 u-padding-20">
						<u-image width="40rpx" height="40rpx" :src="item.showRemove?thumbSelect:thumb"></u-image>
					</view>
					<view class="">
						<view class="flex">
							<!-- <u-image :src="thumb" width="40" height="40" class="card__icon mr-10"></u-image> -->
							<view class="">
								终端SN：{{item.sn}}
							</view>

						</view>
						<view class="flex u-margin-top-20">
							<view class="">
								活动:
							</view>
							<view class="">
								{{item.activityName}}
							</view>
						</view>
					</view>


				</view>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>

		<view class="fixed  u-padding-20 flex align-center">

			<view class="flex flex-2" @click="allSelect()">
				<u-image class="u-margin-right-10" width="40rpx" height="40rpx"
					:src="allSelected?thumbSelect:thumb"></u-image>全选

			</view>
			<u-button type="primary" class="flex-1 u-margin-left-15" :custom-style="customSubmitStyle"
				hover-class="false" @click="submitAllocate()">分拨选择</u-button>
		</view>

		<u-popup v-model="showPopup" mode="top" class="pop_filter">
			<view>
				<view class="pop_filter__title u-margin-left-20">
					选择类型
				</view>
				<view class="flex u-margin-top-20 u-margin-bottom-20">
					<view class="pop_filter__btn " :class="{'pop_filter__select':checked===index}"
						v-for="(item,index) in typeFilter" :key="index" @click="selectBtn(
					'1',index)">
						{{item.label}}
					</view>
				</view>



				<view class="flex u-margin-20 u-padding-top-20">
					<u-button type="primary" class="flex-1 u-m-r-15" :custom-style="customCancelStyle"
						hover-class="false" @click="cancel()">重置</u-button>
					<u-button type="primary" class="flex-1 u-margin-left-15" :custom-style="customSubmitStyle"
						hover-class="false" @click="submitFilter()">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				customCancelStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#f6f6f6',
					color: 'black'

				},
				customSubmitStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF',
					color: 'white'
				},
				src: "/static/image/home/icon_scan.png",
				thumb: "/static/image/home/icon_check_default.png",
				thumbSelect: "/static/image/home/icon_check_checked.png",
				pageNo: 1,
				pageSize: "10",
				requstBody: {
					beginSn: "",
				},
				requstTwoBody: {
					beginSn: "",
					endSn: ""
				},
				terminalList: [],
				scrollTop: 0,
				status: "loadmore",
				typeFilter: [{
						label: '按查询',
						value: '0',
					},
					{
						label: '按号段',
						value: '1',
					}
				],
				showPopup: false,
				checked: 0,
				allSelected: false

			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		mounted() {

			this.terminalInfoQueryIssueList();
		},
		methods: {
			submitAllocate() {
				let sn = "";
				let num = 0;
				this.terminalList.find((data, _index) => {
					if (data.showRemove) {
						sn += data.sn;
						num += 1;
					}

				});
				if (sn == null) {
					uni.$zx.msg("请选择终端", {
						duration: 4000,
					});
					return;
				}

				this.$u.route('packageB/pages/main/terminal/terminalAllocatedSelect', {
					"sn": sn,
					"size": num
				})
			},
			allSelect() {
				this.allSelected = !this.allSelected;
				this.terminalList.find((data, _index) => {
					data.showRemove = true;
				});
			},
			itemSelect(item) {
				if (item.showRemove == null || !item.showRemove) {
					item.showRemove = true;
				} else {
					item.showRemove = false;
				}
			},
			goSearch(num) {
				const _that = this;
				_that.pageNo = 1;
				_that.terminalList = [];

				_that.terminalInfoQueryIssueList();
			},
			selectBtn(type, index) {
				if (type == "1") {
					this.checked = index;
				}

			},
			cancel() {
				const _that = this;
				_that.checked = 0;
			},
			submitFilter() {
				const _that = this;
				_that.pageNo = 1;
				_that.terminalList = [];
				_that.requstBody.beginSn = null;
				_that.requstTwoBody.beginSn = null;
				_that.requstTwoBody.endSn = null;
				_that.terminalInfoQueryIssueList();
				_that.showPopup = false;
			},
			triggleDrop() {

				this.showPopup = !this.showPopup;

			},
			goRecord() {
				this.$u.route('packageB/pages/main/terminal/terminalIssueRecordList', {
					type: "1"
				})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.terminalInfoQueryIssueList();
			},
			terminalInfoQueryIssueList() {
				let param = {};
				let _that = this;

				param = _that.checked == 0 ? _that.requstBody : _that.requstTwoBody;

				_that.$zx.terminal_api.terminalInfoQueryIssueList(this.pageNo, this.pageSize, param).then((
					data) => {
					// console.log("data=" + JSON.stringify(data))
					_that.terminalList = _that.terminalList.concat(data);
					// console.log("data=" + JSON.stringify(_that.terminalList))
					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}
				});
			},


		},
	}
</script>

<style scoped lang="scss">
	.terminal-state {
		&__header {
			padding: 20rpx;
			background-color: white;

		}

		&__item {
			background-color: white;
			border-radius: 20rpx;
			margin: 10rpx 20rpx;
			padding: 20rpx;
		}
	}

	.pop_filter {
		position: absolute;
		top: 180rpx;

		&__title {
			font-weight: bold;
			height: 60rpx;
			line-height: 60rpx;
		}

		&__btn {
			background-color: #f6f6f6;
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			margin: 0 20rpx;
			border-radius: 10rpx;
		}

		&__input {
			background-color: #f6f6f6;
			margin: 0 20rpx;
			border-radius: 10rpx;

		}

		&__select {
			background-color: #F1E8FF;
			color: #9D60FF;
			background-image: url("/static/image/home/icon_filter_checked.png");
			background-position: right bottom;
			background-repeat: no-repeat;
		}
	}

	.fixed {

		width: 100%;
		height: 150rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}
</style>